
<template>
  <section class="main-nav">
      <router-link class="main-nav-item" to='/'>
            <img src="./tuangou.png" alt="">
            <span>热门团购</span>
      </router-link>
      <router-link class="main-nav-item" to='/brand'>
            <img src="./brand.png" alt="">    
            <span>品牌馆</span>
      </router-link>
      <router-link class="main-nav-item" to='/teaCircle'>
            <img src="./tea.png" alt="">    
            <span>茶友圈</span>
      </router-link>
  </section>
  


</template>
<script>
export default {};
</script>
<style lang="scss">
@import "../../../assets/scss/_index.scss";
.main-nav{
    display: flex;
    justify-content: space-around;
    background: #fff;
    width: 100%;
    height: px2rem(140);
    padding-bottom: px2rem(15);
    padding-top: px2rem(15);
    .main-nav-item{
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        text-align: center;
        height: 100%;
        span{
            // display: block;
            font-size: px2rem(20);
            color: #535353;
        }
        img{
            width: px2rem(80);
            height: px2rem(80);
            margin-bottom: px2rem(15);            
        }
    }
}

</style>



